<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示所有用户</title>
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <!--    解释css-->
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
    <!--    引入自己写的css样式-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}">
</head>
<body>
<div  class="container" >
    <div style="margin: 4px 0 4px 0">
        <a class="btn btn-primary btn-large" th:href="@{/user/toinsert/{curPage}(curPage=${pageInfo.getPageNum()})}">新 &nbsp;&nbsp; 增</a>
    </div>
    <table class="table table-hover table-light table-bordered" style="text-align: center">
        <thead class="thead-dark">
            <tr>
                <th scope="col">序号</th>
                <th scope="col">用户名</th>
                <th scope="col">密码</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody class="">
            <tr th:each="user,serials:${pageInfo.list}">
            <td th:text="${serials.count}"></td>
            <td>
                <a th:href="@{/user/queryById(id=${user.id})}" th:text="${user.userName}" title="用户详情"></a>
            </td>
            <td th:text="${user.password}"></td>
<!--                操作-->
            <td>
                <a class="btn btn-secondary btn-sm" th:href="@{'/user/toupdate/'+${user.id}+'/'+${pageInfo.getPageNum()}}">修改</a>
                <button id="deleteBtn" type="button" class="btn btn-warning btn-sm" th:onclick="showDeleModal([[${user.id}]])">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--模态框-->
<!-- Modal -->
<div class="modal fade" id="deleteModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">危险动作
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-outlet" viewBox="0 0 16 16">
                        <path d="M3.34 2.994c.275-.338.68-.494 1.074-.494h7.172c.393 0 .798.156 1.074.494.578.708 1.84 2.534 1.84 5.006 0 2.472-1.262 4.297-1.84 5.006-.276.338-.68.494-1.074.494H4.414c-.394 0-.799-.156-1.074-.494C2.762 12.297 1.5 10.472 1.5 8c0-2.472 1.262-4.297 1.84-5.006zm1.074.506a.376.376 0 0 0-.299.126C3.599 4.259 2.5 5.863 2.5 8c0 2.137 1.099 3.74 1.615 4.374.06.073.163.126.3.126h7.17c.137 0 .24-.053.3-.126.516-.633 1.615-2.237 1.615-4.374 0-2.137-1.099-3.74-1.615-4.374a.376.376 0 0 0-.3-.126h-7.17z"></path>
                        <path d="M6 5.5a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zM7 10v1h2v-1a1 1 0 0 0-2 0z"></path>
                    </svg>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>真的要删除这条数据吗？请三思。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">再想一想</button>
<!--                删除暂时的值-->
                <input type="hidden" id="tmpDelete">
                <button id="btnDelete" th:onclick="doDeleteFun()" type="button" class="btn btn-primary">确认删除</button>
            </div>
        </div>
    </div>
</div>
<!--分页-->
<div style="margin: 0 182px 0 182px">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
<!--          中间页-->
                <li style="margin: 0 5px 0 0" class="page-item">
                    <button th:disabled="${pageInfo.getPrePage()==0}" th:onclick="toPage(1)" class="btn btn-success">首页</button>
                </li>
                <li th:classappend="${pageInfo.getPrePage()==0?'disabled':''}" class="page-item ">
                    <a class="page-link" th:onclick="toPage([[${pageInfo.getPrePage()}]])" href="#">上一页</a>
                </li>
<!--            当页数到第三页时-->
                <li th:hidden="${pageInfo.getPrePage()-1==0||pageInfo.getPrePage()-1<0}" class="page-item">
                    <a th:text="${pageInfo.getPrePage()-1}" class="page-link" th:onclick="toPage([[${pageInfo.getPrePage()-1}]])" href="#">1</a>
                </li>
                <li th:hidden="${pageInfo.getPrePage()==0}" class="page-item">
                    <a th:text="${pageInfo.getPrePage()}" th:onclick="toPage([[${pageInfo.getPrePage()}]])" class="page-link" href="#">1</a>
                 </li>
                <li class="page-item active" aria-current="page">
                    <a class="page-link" th:text="${pageInfo.getPageNum()}" href="#">2</a>
                </li>
                <li th:hidden="${pageInfo.getNextPage()==0}" class="page-item">
                    <a th:text="${pageInfo.getNextPage()}" th:onclick="toPage([[${pageInfo.getNextPage()}]])" class="page-link" href="#">1</a>
                </li>
<!--            当页数到达第一页时-->
                <li th:hidden="${pageInfo.getNextPage()+1>pageInfo.getPages()||pageInfo.getNextPage()==0}" class="page-item">
                    <a th:text="${pageInfo.getNextPage()+1}" class="page-link" th:onclick="toPage([[${pageInfo.getNextPage()+1}]])" href="#">1</a>
                </li>
                <li th:classappend="${pageInfo.getNextPage()==0?'disabled':''}" class="page-item">
                    <a class="page-link" th:onclick="toPage([[${pageInfo.getNextPage()}]])" href="#">下一页</a>
                </li>
                <li style="margin: 0 0 0 5px" class="page-item">
                    <button th:disabled="${pageInfo.getNextPage()==0}" class="btn btn-success" th:onclick="toPage([[${pageInfo.getPages()}]])" href="#">尾页</button>
                </li>
<!--                <li>-->
<!--                    <div class="input-group mb-3" style="position: relative;left: 50px">-->
<!--                        <div class="input-group-prepend">-->
<!--                            <button id="pageGo" th:onclick="toPage()" class="input-group-text">Go</button>-->
<!--                        </div>-->
<!--                        <input id="inputPageNum" type="text" class="form-control" aria-label="Amount (to the nearest dollar)">-->
<!--                        <div class="input-group-append">-->
<!--                            <span class="input-group-text">.00</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </li>-->
<!--            提示框 toast fade show 显示toast fade hide消失 -->
<!--            <div role="alert" id="message" aria-live="assertive" aria-atomic="true" class="toast fade show">-->
<!--                <div class="toast-header">-->
<!--                    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#007aff"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"> </text></svg>-->

<!--                    <strong class="mr-auto">Bootstrap</strong>-->
<!--                    <small>11 mins ago</small>-->
<!--                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">-->
<!--                        <span aria-hidden="true">×</span>-->
<!--                    </button>-->
<!--                </div>-->
<!--                <div class="toast-body">-->
<!--                    Hello, world! This is a toast message.-->
<!--                </div>-->
<!--            </div>-->
        </ul>
    </nav>
    <nav style="float:right;position:relative; top: -55px">
        <ul class="pagination justify-content-center">
            <li>
                <div class="input-group mb-0" >
                    <div class="input-group-prepend">
                        <span th:text="'当前: '+${pageInfo.getPageNum()}+'/'+${pageInfo.getPages()}+'页'" class="input-group-text"></span>
                    </div>
                        <input id="inputPageNum" style="width: 40px;" type="text" class="form-control">
                    <div class="input-group-append">
                        <button id="pageGo" th:onclick="toPage()" class="input-group-text">跳转</button>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
</div>

</body>
<!--能够使js中使用th:model 中的数据
-->
<script th:inline="javascript">
    function toPage(curPage){
        var inputPageNum;
        console.log("curPage--"+curPage)
        if (curPage==undefined||curPage==null||curPage==""){
            inputPageNum=$("#inputPageNum").val();
        }else {
            inputPageNum=curPage;
        }
        console.log("！！！"+inputPageNum);
        if (curPage!="")
        console.log("input的值"+inputPageNum);
        if (inputPageNum!=""&&inputPageNum>=1&&inputPageNum<=[[${pageInfo.getPages()}]]){
            $.get("/dev/user/pageInfo?curPage="+inputPageNum,function (data){
                $("body").html(data);
            });
        }else {
            alert("我是傻逼");
        }
    }
//    模态框使用
    function showDeleModal(id){
        $("#tmpDelete").val(id);
        $("#deleteModal").modal("show");
    }
//    确认删除
    function doDeleteFun(){
        var curPage=[[${pageInfo.getPageNum()}]];
        var id=$("#tmpDelete").val();
        $("#deleteModal").modal("hide");
        location.href="/dev/user/deleteById?id="+id+"&curPage="+curPage;
    }

</script>
</html>